vue 固定 Dialog 对话框的高度

您所在的位置:网站首页 el-dialog 高度 vue 固定 Dialog 对话框的高度

vue 固定 Dialog 对话框的高度

2024-07-11 09:29| 来源: 网络整理| 查看: 265

Element UI组件提高了不少开发效率,使用 Dialog 对话框的时候发现,组件说明文档提供了 width 来设置 Dialog 的宽度,并没有给出如何固定高度。

对话框的高度会随着对话框中内容的多少而变化,如下所示: 在这里插入图片描述 内容太多时: 在这里插入图片描述 这样造成的体验很不好,所以,为了能够防止内容超出弹框,并且一直看到footer里的按钮,需要固定对话框的高度,我的解决办法是:

在对话框内容元素的外面加一个 div,然后设置 div 的高度,并且设置 overflow: auto,这样,内容超出时会出现滚动条,可以进行滑动,如下:

{{ $t('sysManage.cancel') }} {{ $t('sysManage.confirm') }} .dialogDiv { height: 300px; overflow: auto; }

这样,不管内容多少,都可以防止内容超出弹框,并且一直看到footer里的按钮,如下: 在这里插入图片描述 内容过多时,会出现滚动条,也不会超出弹框,如下: 在这里插入图片描述



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3